<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程编辑</title>
    <script src="./vue3.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        function getQueryString(name) {
            const URL = new URLSearchParams(window.location.search)
            let val = URL.get(name)
            return val
        }
    </script>
</head>
<body>
    <div id="app">
        <div>
            修改课程
            <p>课程id
                <input v-model="subject.subjectNo"/>
            </p>
            <p>课程名称
                <input v-model="subject.subjectName"/>
            </p>
            <p>
                年级
                <select v-model="subject.gradeID">
                    <option
                            v-for="item in grades"
                            :value="item.gradeID"
                            :key="item.gradeID">{{item.gradeName}}</option>
                </select>
            </p>
            <p>学时
                <input v-model="subject.classHour"/>
            </p>
            <p>
                <button @click="handleUpdateClick">保存</button>
            </p>
        </div>
    </div>
    <script>
        // alert(getQueryString("id"))
        const {createApp} = Vue
        createApp({
            data(){
                return {
                    subject:{
                        subjectNo:getQueryString("id"),
                        subjectName:'',
                        gradeID:'',
                        classHour:''
                    },
                    grades:[]
                }
            },
            methods:{
                loadgrades(){
                    axios.get('http://localhost:8080/grade/all')
                        .then(res => {
                            this.grades = res.data.data
                        })
                },
                loadsubject(){
                    axios.get('http://localhost:8080/subject/one?subjectNo='+this.subject.subjectNo)
                    .then(res => {
                        const subject = res.data.data
                        this.subject.subjectName = subject.subjectName
                        this.subject.gradeID = subject.gradeID
                        this.subject.classHour = subject.classHour
                    })
                },
                handleUpdateClick(){
                    axios.post('http://localhost:8080/subject/update',this.subject)
                        .then(res => {
                            if(res.data.success){
                                alert('修改成功')
                                //重置数据
                                this.subject = {
                                    subjectNo:'',
                                    subjectName:'',
                                    gradeID:'',
                                    classHour:''
                                }
                            }
                        })
                }
            },
            created(){
                this.loadgrades()
                this.loadsubject()
            }
        }).mount('#app')
    </script>
</body>
</html>